<template>
  <div class="home-container">
    <!-- 标题 -->
    <TopHeader></TopHeader>

    <div class="flex" style="margin-top: 40px; margin-left: 20px">

      <!-- 前三个 -->
      <div class="mr-20" style="margin-left: 60px">
        <First></First>
      </div>


      <div class="mr-20" style="margin-left: 40px">
        <Second></Second>
      </div>


      <div class="mr-20" style="margin-left: 40px">
        <Third></Third>
      </div>



      <div class="mr-20" style="margin-left: 40px">
        <Map></Map>
      </div>



      <!-- 后三个 -->
      <div class="mr-20" style="margin-left: 40px">
        <Forth></Forth>
      </div>




      <div class="mr-20" style="margin-left: 40px">
        <Fifth></Fifth>
      </div>


      <div class="mr-20" style="margin-left: 40px">
        <Sixth></Sixth>
      </div>




    </div>
  </div>
</template>

<script lang="ts" setup>


// 第一個
import First from "/@/components/FirstComponent/index.vue";
import Second from "/@/components/SecondComponent/index.vue";
import Third from "/@/components/ThirdComponent/index.vue";

import Forth from "/@/components/ForthComponent/index.vue";
import Fifth from "/@/components/FifthComponent/index.vue";
import Sixth from "/@/components/SixthComponent/index.vue";

import TopHeader from "/@/components/TopHeader/index.vue";

import Map from "/@/components/Map/index.vue";

</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>

